<template>

  <div class="u-page tpink-page-bgcolor">
    <u-navbar :is-back="false" :background="background" :border-bottom="false">
      <view class="slot-wrap">
        <u-image width="480rpx" height="100rpx"
                 src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/life_page_logo.png"></u-image>
      </view>
    </u-navbar>
    <div class="tpink-page-top-bgcolor">
      <div class="u-flex u-pt-15 u-pb-10 u-pl-10 u-pr-10">
        <div class="search-width">
          <u-search :placeholder="hotText" v-model="keyword" :show-action="false" shape="square" bg-color="#fffdfe"
                    @search="search"></u-search>
        </div>
      </div>
    </div>
    <div>

	<div v-if="!searchStr">
		<!--轮播图-->
		<div>
			<u-swiper :list="JobShopsalesAds" height="365" border-radius="0" @click="clickSwiper"></u-swiper>
		</div>
		<div class="u-flex u-pl-10 u-pr-10 u-pt-15 u-pb-10">
			<div class="label-item">
				<u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/SummerHot/label1.png"></u-image>
				<div class="u-pl-5">全场包邮</div>
			</div>
			<div>|</div>
			<div class="label-item">
				<u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/SummerHot/label2.png"></u-image>
				<div class="u-pl-5">超值低价</div>
			</div>
			<div>|</div>
			<div class="label-item">
				<u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/SummerHot/label3.png"></u-image>
				<div class="u-pl-5">48小时发货</div>
			</div>
		</div>
		<div class="u-pb-10" style="width: 95%;margin: 0 auto;" v-if="JobShopsalesAds2 && JobShopsalesAds2.length>0">
			<div v-for="(item, index) in JobShopsalesAds2">
			  <u-image width="100%" height="auto" mode="widthFix" :src="item.image"
					   @click="clickAD(item)"></u-image>
			</div>
		</div>
		<div class="zone-box u-pl-5 u-pr-5" v-for="(zone,zoneindex) in zoneList" @click="jumpAddress(zone.jumPageAddress)">
		    <div class="zone-box-item u-pl-5 u-pr-5" :key="zoneindex"
		         :style="'background-image: url(' + zone.backgroundImage + ');'">
		      <div style="margin-top: 200rpx;" v-if="zone.data && zone.data.length>0">
		        <div class="clearfix">
		          <a href="javascript:;" class="zone-goods-item" v-for="(item,index) in zone.data" :key="index"
		             @click.stop="toGoodsDetails(item)">
		            <div class="aui-list-theme-img">
		              <u-image width="100%" height="220rpx" :src="item.goodsImages.split(',')[0]"></u-image>
		            </div>
		            <div class="aui-list-theme-message">
						<div class="zone-list-theme-title">{{ item.goodsName }}</div>
						<div class="u-flex" style="justify-content: space-between;">
							<span class="zone-amount-money font-baseline">
								<span class="u-font-bold u-fz-16">&yen;{{ item.discountPrice }}</span>
							</span>
						</div>
		            </div>
		          </a>
		        </div>
		        <div class="zane_jump_page_but u-mt-10">
		          <u-image width="580rpx" height="70rpx" :src="zone.jumpPageButtonImage" border-radius="40"
		                   @click="jumpAddress(zone.jumPageAddress)"></u-image>
		        </div>
		      </div>

		    </div>
		</div>
	</div>

    <div class="u-pt-10">
        <div style="font-weight: bold;width: 95%;margin: 0 auto;">
			<u-tabs :list="list" bg-color="#fef2f6" :show-bar="false" active-color="#444444" inactive-color="#6b6969"
                  :active-item-style="{fontSize:'44rpx'}" height="100" font-size="30" gutter="15" :current="current"
                  @change="change"></u-tabs>
			<div class="u-flex u-scroll-x" style="margin-left: 15rpx;margin-right: 15rpx;padding-bottom: 10rpx;">
				<div v-for="(item,index) in subList[current].data">
					<u-tag :text="item.name" mode="dark" :bg-color="item.checked?'#eb5468':'#f3f2f3'" 
							:color="item.checked?'#ffffff':'#797878'" @click="selectTag(item)" />
				</div>
			</div>
        </div>
    </div>
    <div class="aui-list-box u-pl-5 u-pr-5" v-if="GoodSalesList && GoodSalesList.length>0">
        <a href="javascript:;" class="aui-list-item" v-for="(item,index) in GoodSalesList" :key="index"
           @click="toGoodsDetails(item)">
          <div class="aui-list-theme-img">
            <u-image width="100%" height="343rpx" :src="item.goodsImages.split(',')[0]"></u-image>
          </div>
          <div class="aui-list-theme-message">
            <div class="u-flex line-ellipsis">
              <h3 class="aui-list-theme-title">{{ item.goodsName }}</h3>
            </div>
            <div class="u-flex pt-3">
              <u-image width="25rpx" height="25rpx"
                       src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Life/life_label_icon.png"></u-image>
              <div class="goods-label-text">玫丽全网最低价</div>
            </div>
            <div class="u-flex u-pb-5" style="justify-content: space-between;">
							<span class="amount-money font-baseline">
								<span class="u-fz-18 u-font-bold">&yen;{{ item.discountPrice }}</span>
							</span>
              <span class="sales-volume">
								本期售{{ item.soldNum ? item.soldNum : 0 }}
							</span>
            </div>
          </div>
        </a>
    </div>
    <div class="u-text-center" style="padding-top: 20%;" v-else>
        <u-empty text="暂无搜索结果" mode="data"></u-empty>
    </div>
    </div>
	
	<!-- 公告 -->
	<Notice ref="noticeModule"></Notice>
	
  </div>
</template>

<script>
import globalData from "@/globalData";
import shareMixins from '@/mixins/share';

export default {
  mixins: [shareMixins],
  data() {
    return {
		hotText: '请输入关键词',
		keyword: '',
		searchStr: '',
		pageNum: 1,
		pageSize: 10,
		GoodSalesList: [],
		signedGoodsList: [],
		ninePointNineGoodsList: [],
		summerGoodsList: [],
		JobShopsalesAds: [],
		JobShopsalesAds2: [],
		title: '生活',
		background: {
			backgroundColor: '#f1d7e0'
		},
		shareRoute: '',
		shareData: {
			docUnid: '',
			url: '',
			style: 9,
			type: 2,
			route: '',
			posterData: {},
			imageUrl: ''
		},
		shareList: [],
		zoneList: [
			{
				backgroundImage: 'https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/EvaluationIndex/hot_selling_explosive.png',
				zoneType: 'SUMMER',
				jumpPageButtonImage: 'https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/EvaluationIndex/hot_selling_explosive_btn.png',
				data: [],
				jumPageAddress: 'pages_private_scene2/GroupPurchase/SummerHot'
			},
			{
				backgroundImage: 'https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/EvaluationIndex/brand_sale.png',
				zoneType: 'SIGNED',
				jumpPageButtonImage: 'https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/EvaluationIndex/brand_sale_btn.png',
				data: [],
				jumPageAddress: 'pages_private_scene2/GroupPurchase/BrandSale'
			},
			{
				backgroundImage: 'https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/EvaluationIndex/9.9.png',
				zoneType: 'NINE_POINT_NINE_ZONE',
				jumpPageButtonImage: 'https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/EvaluationIndex/9.9_btn.png',
				data: [],
				jumPageAddress: 'pages_private_scene2/GroupPurchase/RushPurchase'
			}
		],
		list: [
			{name: '为你推荐'},
			{name: '孩子用品'},
			{name: '宝妈自用'},
			{name: '家庭消费'}
		],
		current: 0,
		subList: [
			{
				data: []
			},
			{
				data: [
					{name:'全部',checked:true},
					{name:'健康和营养',checked:false},
					{name:'教育和成长',checked:false},
					{name:'娱乐和玩具',checked:false}
				]
			},
			{
				data: [
					{name:'全部',checked:true},
					{name:'美容与保健',checked:false},
					{name:'时尚与穿搭',checked:false},
					{name:'兴趣与爱好',checked:false}
				]
			},
			{
				data: [
					{name:'全部',checked:true},
					{name:'厨房用品与食品',checked:false},
					{name:'家居生活与旅行',checked:false},
					{name:'家居装饰与家具',checked:false}
				]
			}
		],
		supplyChain: '',
    };
  },

  onLoad(options) {
    this.shareData.route = this.getCurrentPageUrl(this)
    this.getAds()
    this.getHotText('shopsales')
    this.getZoneGoodsList()
  },

  onShow() {
	  this.reloadNotice()
  },
  
  onPullDownRefresh() {
    this.pageNum = 1
    this.getZoneGoodsList()
	this.getAds()
    setTimeout(() => {
      // 停止Loading
      uni.stopPullDownRefresh();
    }, 1000)
  },

  onReachBottom() {
    this.pageNum += 1
    this.getGoodSalesList()
  },

  methods: {

    /**
     * 获取广告图
     */
    async getAds() {
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/config/list",
        configType: "evaluation"
      });
      if (result.code == 200) {
		this.JobShopsalesAds = []
		this.JobShopsalesAds2 = []
        let rows = result.rows
        if (rows.length > 0) {
          for (const i in rows) {
            if (rows[i].configKey == 'evaluation-shopsales') {
              let obj = {image: rows[i].imageLink.split(",")[0], link: rows[i].configLink, source: rows[i].configFrom}
              this.JobShopsalesAds.push(obj)
            }else if (rows[i].configKey == 'evaluation-shopsales2') {
              let obj = {image: rows[i].imageLink.split(",")[0], link: rows[i].configLink, source: rows[i].configFrom}
              this.JobShopsalesAds2.push(obj)
            }
          }
        }
      }
    },

    jumpAddress(address) {
      this.routeAD(address, 'applet')
    },

    /**
     * 点击轮播图跳转
     */
    clickSwiper(index) {
      this.routeAD(this.JobShopsalesAds[index].link, this.JobShopsalesAds[index].source)
    },
	
	clickAD(item) {
	  this.routeAD(item.link, item.source)
	},

    change(index) {
		if(this.current != index){
			this.current = index
			if(this.current != 0){
				this.supplyChain = this.list[this.current].name
			}else{
				this.supplyChain = ''
			}
			this.pageNum = 1
			this.getGoodSalesList()
		}
    },

    /**
     * 获取商品销售类列表数据
     */
    async getGoodSalesList() {
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/goods/shelf/list",
        searchStr: this.searchStr,
		supplyChain: this.supplyChain,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
		excludeZoneData: true,
        loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      if (result.code == 200) {
        if (result.rows.length > 0 && this.isNotNull(result.rows[0].goodsName)) {
          this.hotText = "大家都在搜" + result.rows[0].goodsName;
        }

        if (this.pageNum != 1) {
          this.GoodSalesList = this.GoodSalesList.concat(result.rows);
        } else {
          this.GoodSalesList = result.rows;
        }
      }
    },

    async getZoneGoodsList() {
		let result = await this.$u.api.unifyMiniRestGet({
		  systemid: "meily",
		  url: "/goods/query/zone/show/goods/ALL",
		  loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result.code == 200){
			 this.zoneList[0].data = result.data.SUMMER
			 this.zoneList[1].data = result.data.SIGNED
			 this.zoneList[2].data = result.data.NINE_POINT_NINE_ZONE
			 this.getGoodSalesList()
		}
    },

    /**
     * 获取搜索关键词
     */
    async getHotText(collectType) {
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/hall/hot/task",
        collectType: collectType,
        loading: false
      });
      if (result.code == 200 && this.isNotNull(result.data)) {
        this.hotText = '大家都在搜' + result.data
      }
    },

    search() {
      this.pageNum = 1
      this.searchStr = this.keyword
      this.getGoodSalesList()
    },

    /**
     * 跳转到商品详情
     */
    async toGoodsDetails(item) {

      // 增加访问量，不需要管是否执行成功
      this.increaseTraffic(item);

      // 跳转到销售机会页面
      this.$u.route('/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId);
      // 未登录跳转到登录页面
      // var loginRes = this.checkLogin()
      // if (!loginRes) {
      // 	return false;
      // }
      // let result = await this.$u.api.unifyMiniRestGet({
      // 	systemid: "meily",
      // 	url: "/goods/cycle/" + item.goodsId,
      // });
      // if (result.code == 200 && this.isNotNull(result.data)) {
      // 	let result2 = await this.$u.api.unifyMiniRest({
      // 		systemid: "meily",
      // 		url: "/buying/getSimilarGroups",
      // 		initiatorId: uni.getStorageSync('userInfo').userId,
      // 		cycle: result.data, // 周期串
      // 		goodsNo: item.goodsNo,
      // 		goodsId: item.goodsId,
      // 		sceneAssetsId: "f2e88bd30198f04f6c092420aab54b64a45f",
      // 		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      // 	});
      // 	if (result2.code == 200) {
      // 		if (result2.data.length > 0) {
      // 			// 有正在进行中的拼团(默认取第一个)，直接跳转到拼团详情
      // 			this.$u.route('/pages_private_scene2/GroupPurchase/SolitaireDetails?docUnid='+result2.data[0].id);
      // 		}else {
      // 			// 跳转到销售机会页面
      // 			this.$u.route('/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId);
      // 		}
      // 	} else {
      // 		this.$u.toast(result2.msg);
      // 	}
      // }else{
      // 	this.$u.toast("出错啦！");
      // }
    },

    /**
     * 增加访问量
     */
    async increaseTraffic(item) {
      console.log("**************************");
      console.log("开始执行，增加访问量...");
      const userInfo = uni.getStorageSync('userInfo')
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/behavior/statistics/update",
        createUser: userInfo.userId,
        createUserName: userInfo.nickName,
        createUserAvatar: userInfo.avatarUrl,
        behaviorId: item.goodsId,
        behaviorName: item.goodsName,
        behaviorType: '0',// 访问量
        sourceId: item.goodsId,
        sourceType: '0',// 商品
        remark: '',
        loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      console.log(result);
      console.log("增加访问量，执行结束！");
      console.log("**************************");
    },

    /**
     * 唤起分享组件弹出
     */
    wakeShareModule(item, index) {
      let that = this
      that.shareData.docUnid = item.goodsNo
      that.shareData.url = '/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId
      let price = item.foremanReward + "~￥" + (parseFloat(item.foremanReward ? item.foremanReward : 0) + parseFloat(item.consumerShareReward ? item.consumerShareReward : 0) + parseFloat(item.tenThousandProfit ? item.tenThousandProfit : 0)).toFixed(2)
      let obj = {
        imageURL: item.goodsImages.split(",")[0], // 商品主图URL地址
        productName: item.goodsName, // 商品名称
        productPrice: price, // 商品价格
        invitemsg: '邀请您参与商品销售工作', // 邀请内容。如邀请购买商品，可不传。默认邀请
        type: 'bmhb'
      }
      that.shareData.posterData = obj
      that.shareData.imageUrl = item.goodsImages.split(",")[0]
      that.shareData.shareTitle = '每件赚¥' + parseFloat(item.foremanReward ? item
              .foremanReward : 0) + '~¥' + (parseFloat(item.foremanReward ? item
              .foremanReward : 0) + parseFloat(item.tenThousandOnlineCashback ? item
              .tenThousandOnlineCashback : 0) + parseFloat(item.tenThousandProviderCashback ?
          item.tenThousandProviderCashback : 0)).toFixed(2) +
          '！！代理销售' + item.goodsName
      that.$refs.shareModule[index].wakeUpPop()
    },
	
	/** 
	 * 选中子分类
	 */
	selectTag(item) {
		if(!item.checked){
			for(const i in this.subList[this.current].data) {
				if(this.subList[this.current].data[i].name == item.name){
					this.subList[this.current].data[i].checked = true
				}else{
					this.subList[this.current].data[i].checked = false
				}
			}
			if(this.current != 0){
				this.supplyChain = item.name=='全部'?this.list[this.current].name:(this.list[this.current].name + '-' + item.name)
			}else{
				this.supplyChain = ''
			}
			this.pageNum = 1
			this.getGoodSalesList()
		}
	},
	
  },
};
</script>

<style scoped>

.search-width {
  width: 100%;
}

.full-postage-logo{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0 10rpx 0;
}

.zone-box-item {
  border-radius: 1%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background-size: 100% 100%;
  background-repeat: no-repeat; /* 禁止重复背景图片 */
  background-position: center center; /* 居中显示背景图片 */
}

.zone-goods-item {
  width: 31%;
  float: left;
  margin: 0 0 2% 2%;
  display: block;
  overflow: hidden;
  background-color: #fffdfe;
  border-radius: 10rpx;
}

.clearfix {
	width: 98%;
	margin: 0 auto;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.zone-list-theme-title {
	color: #4a4a4a;
	font-size: 28rpx;
	line-height: 30rpx;
	margin-top: 5rpx;
	width: 210rpx;
	overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.zone-amount-money {
  color: #ea4d5e;
  font-size: 20rpx;
  margin: 0 auto;
}

.zane_jump_page_but {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 50rpx;
}

/* 商品列表 */
.aui-list-box {
  overflow: hidden;
  position: relative;
}

.aui-list-item {
  width: 47%;
  float: left;
  margin: 0 0 2% 2%;
  display: block;
  overflow: hidden;
  background-color: #fffdfe;
  /* box-shadow: 5rpx 5rpx 5rpx 5rpx #f3f2f2eb; */
  border-radius: 10rpx;
}

.aui-list-theme-img {
  height: auto;
  width: 100%;
  position: relative;
}

.aui-list-theme-img img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.aui-list-theme-message {
  background: #ffffff;
  padding: 10rpx 10rpx;
}

.aui-list-theme-title {
  color: #4a4a4a;
  font-size: 30rpx;
  line-height: 38rpx;
  margin-top: 5rpx;
}

.aui-list-theme-message p {
  /*color: #ff3b52;*/
  font-size: 24rpx;
  font-weight: bold;
}

.aui-list-theme-message span.line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
  text-decoration: line-through;
}

.aui-list-theme-message span.none-line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
}

.aui-list-theme-message p i {
  font-style: normal;
  font-size: 0.7rem;
  padding: 0 0.2rem;
  color: #ff3b52;
  float: right;
  width: 25px;
  height: 25px;
}

.aui-list-theme-message p em {
  font-style: normal;
  font-size: 0.7rem;
  color: #ff3b52;
  text-decoration: line-through;
  font-weight: normal;
}

.price-tag {
  padding: 2rpx;
  color: #f16158;
  border: 2rpx solid #ea4d5e;
  text-align: center;
  font-size: 18rpx;
  line-height: 22rpx;
}

.sold-num {
  color: #b7b7b7;
  font-size: 24rpx;
}

/* 两行或多行显示... */
.line-ellipsis {
  width: 320rpx;
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.goods-title-tag {
  padding: 0rpx 5rpx;
  color: #ffffff;
  border-radius: 5rpx;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.goods-label-text {
  color: #ba8e41;
  font-size: 22rpx;
  font-weight: 300;
  padding-left: 3rpx;
}

.pt-3 {
  padding-top: 3rpx;
}

.slot-wrap {
  display: flex;
  align-items: center;
  /* 如果您想让slot内容占满整个导航栏的宽度 */
  flex: 1;
  /* 如果您想让slot内容与导航栏左右有空隙 */
  padding: 0 40rpx;
}

.font-baseline {
  display: flex;
  align-items: baseline;
}

.amount-money {
  color: #ea4d5e;
  font-size: 22rpx;
}

.sales-volume {
  color: #b7b7b7;
  font-size: 22rpx;
}

.label-item {
	width: 32%;
	font-size: 28rpx;
	font-weight: 300;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mask-solt {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
